<template>
    <div class="image-list flex-row">
      <div class="image-item flex-col" v-for="(item,index) in imgList" :key="index" @mouseover="onMouseOver(index)" @mouseleave="onMouseLeave()">
        <div class="preview" :style="'background-image: url('+baseUrl+item.path+')'">
          <div class="mask flex-row-center" v-if="index===currentOverIndex">
            <div class="flex-col-center" @click="onPictureCardPreview(item)">
              <el-icon><CirclePlusFilled /></el-icon>
              <div class="mask-item">查看</div>
            </div>
            <div class="flex-col-center" @click="handleRemove(item)">
              <el-icon><DeleteFilled /></el-icon>
              <div class="mask-item">删除</div>
            </div>
            
          </div>
        </div>
        <div class="des" >{{item.created}}</div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" width="500" title="警告">
      <span>确定要删除图片吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSureRemovePicture">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue';
import { CirclePlusFilled, DeleteFilled } from '@element-plus/icons-vue'
export default defineComponent({
    name: 'ImageList',
    props:{
        imgList:Array
    },
    components:{
        DeleteFilled,
        CirclePlusFilled
    },
    emits:['PictureCardPreview','removePicture'],
    setup(props, ctx) {
        const baseUrl=process.env.VUE_APP_BASE_API
        const dialogVisible = ref(false)
        const currentOverIndex=ref(-1)
        //当前要删除的图片
        let picItem:any
        const handleRemove=(item:any)=>{
          picItem=item
          //ctx.emit('removePicture',item)
          dialogVisible.value=true
        }
        const onSureRemovePicture=()=>{
          dialogVisible.value=false
          ctx.emit('removePicture',picItem)
        }
        const onMouseOver=(index:number)=>{
            //console.log(index)
            currentOverIndex.value=index
        }
        const onMouseLeave=()=>{
            currentOverIndex.value=-1
        }
        const onPictureCardPreview=(item:any)=>{
            ctx.emit('PictureCardPreview',item)
        }
        return {
          dialogVisible,
          baseUrl,
          currentOverIndex,
          onMouseOver,
          onMouseLeave,
          handleRemove,
          onPictureCardPreview,
          onSureRemovePicture
        }
    }
})
</script>
<style lang="less" scoped>
.image-list{
    flex-wrap: wrap;
    .image-item{
      gap: 8px;
      padding: 15px 8px;
      .preview{
        width: 120px;
        height: 100px;
        background-size: cover;
        .mask{
          background-color: rgba(0, 0, 0, 0.479);
          height: 100%;
          color: white;
          font-size: 14px;
          gap: 10px;
          el-icon{
            font-size: large;
          }
          .mask-item{
            font-size: 12px;
          }
        }
        :hover{
          cursor: pointer;
        }
      }
      .des{
        font-size: 12px;
        color: #00000080;
      }
    }
}
</style>